<template>
  <div class="database-schema-test-container">
    <div class="test-card">
      <h2>🗄️ 数据库表结构检查</h2>
      
      <div class="test-section">
        <h3>检查管理员表结构</h3>
        <p>检查数据库中administrator表的实际字段名</p>
        <el-button @click="checkTableSchema" type="primary">检查表结构</el-button>
        <p class="result">{{ schemaResult }}</p>
      </div>

      <div class="test-section">
        <h3>检查管理员数据</h3>
        <p>查看数据库中的管理员数据</p>
        <el-button @click="checkAdminData" type="success">检查管理员数据</el-button>
        <p class="result">{{ dataResult }}</p>
      </div>

      <div class="test-section">
        <h3>建议的修复方案</h3>
        <div class="fix-suggestions">
          <h4>方案1: 修改数据库表结构（推荐）</h4>
          <div class="sql-code">
            <pre>{{ fixSql1 }}</pre>
          </div>
          <el-button @click="copySql1" type="primary">复制SQL</el-button>

          <h4>方案2: 修改Java实体类</h4>
          <p>如果数据库字段名不是 administratorId，需要修改Java实体类中的字段名或使用@Column注解</p>
          
          <h4>方案3: 使用MyBatis字段映射</h4>
          <p>在Mapper中使用@Results注解明确指定字段映射关系</p>
        </div>
      </div>

      <div class="test-section">
        <h3>常见字段名对应关系</h3>
        <el-table :data="fieldMappings" style="width: 100%">
          <el-table-column prop="javaField" label="Java字段名" />
          <el-table-column prop="possibleDbFields" label="可能的数据库字段名" />
          <el-table-column prop="description" label="说明" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 测试结果
const schemaResult = ref('')
const dataResult = ref('')

// 字段映射关系
const fieldMappings = ref([
  {
    javaField: 'administratorId',
    possibleDbFields: 'administratorId, administrator_id, id, admin_id',
    description: '管理员主键ID'
  },
  {
    javaField: 'administratorName',
    possibleDbFields: 'administratorName, administrator_name, admin_name, username',
    description: '管理员用户名'
  },
  {
    javaField: 'administratorPassword',
    possibleDbFields: 'administratorPassword, administrator_password, password, admin_password',
    description: '管理员密码'
  }
])

// 修复SQL方案1
const fixSql1 = `-- 检查当前表结构
DESCRIBE administrator;

-- 如果主键字段不是administratorId，需要重命名
-- 假设当前主键字段是id，则执行：
ALTER TABLE administrator CHANGE COLUMN id administratorId BIGINT NOT NULL AUTO_INCREMENT;

-- 如果字段名是下划线格式，则执行：
ALTER TABLE administrator CHANGE COLUMN administrator_id administratorId BIGINT NOT NULL AUTO_INCREMENT;
ALTER TABLE administrator CHANGE COLUMN administrator_name administratorName VARCHAR(50) NOT NULL;
ALTER TABLE administrator CHANGE COLUMN administrator_password administratorPassword VARCHAR(100) NOT NULL;

-- 验证修改结果
DESCRIBE administrator;
SELECT * FROM administrator;`

// 检查表结构
const checkTableSchema = () => {
  schemaResult.value = `请在数据库中执行以下SQL来检查表结构：

1. 检查表结构：
   DESCRIBE administrator;
   
2. 查看建表语句：
   SHOW CREATE TABLE administrator;

3. 检查字段信息：
   SELECT COLUMN_NAME, DATA_TYPE, IS_NULLABLE, COLUMN_KEY 
   FROM INFORMATION_SCHEMA.COLUMNS 
   WHERE TABLE_NAME = 'administrator' AND TABLE_SCHEMA = DATABASE();

请将执行结果贴到这里，我们可以根据实际情况调整代码。

常见问题：
- 主键字段可能叫 'id' 而不是 'administratorId'
- 字段名可能使用下划线格式如 'administrator_id'
- 字段类型可能不匹配`

  ElMessage.info('请在数据库中执行相关SQL检查表结构')
}

// 检查管理员数据
const checkAdminData = () => {
  dataResult.value = `请在数据库中执行以下SQL来检查数据：

1. 查看所有管理员数据：
   SELECT * FROM administrator;

2. 检查特定管理员：
   SELECT * FROM administrator WHERE administratorName = 'admin';
   
3. 检查数据类型：
   SELECT 
     administratorId,
     TYPEOF(administratorId) as id_type,
     administratorName,
     administratorPassword
   FROM administrator;

从之前的日志看，数据查询是成功的：
- administratorName: root01 ✅
- administratorPassword: 123suyu ✅  
- administratorId: null ❌

这说明主键字段没有正确映射，可能的原因：
1. 数据库字段名不是 'administratorId'
2. 字段类型不匹配
3. MyBatis映射配置问题`

  ElMessage.info('请在数据库中执行相关SQL检查数据')
}

// 复制SQL
const copySql1 = async () => {
  try {
    await navigator.clipboard.writeText(fixSql1)
    ElMessage.success('修复SQL已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}
</script>

<style scoped>
.database-schema-test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.test-card h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f8f9fa;
}

.test-section h3 {
  margin-top: 0;
  color: #34495e;
  margin-bottom: 15px;
}

.test-section p {
  color: #7f8c8d;
  margin-bottom: 15px;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background: #ffffff;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  border-left: 4px solid #3498db;
  max-height: 400px;
  overflow-y: auto;
}

.fix-suggestions {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #f39c12;
}

.fix-suggestions h4 {
  color: #e67e22;
  margin-top: 20px;
  margin-bottom: 10px;
}

.fix-suggestions h4:first-child {
  margin-top: 0;
}

.sql-code {
  background: #2d3748;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 6px;
  margin: 10px 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  overflow-x: auto;
}

.sql-code pre {
  margin: 0;
  white-space: pre-wrap;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
